<template>
  <a-modal
    :visible="visible"
    :title="editId ? '学校专业信息修改' : '新增学校专业信息'"
    okText="保存"
    :width="700"
    @cancel="() => { $emit('cancel') }"
    :maskClosable="false"
    :bodyStyle="{
      'max-height': '60vh',
      overflow: 'auto'
    }"
    @ok="() => { $emit('create') }"
  >
    <a-form :form="form" layout="vertical">
      <a-row :gutter="48">
        <a-col :md="12" :sm="24">
          <a-form-item
            label="专业号"
          >
            <a-input
              v-decorator="[
                'zyh',
                {
                  rules: [{ required: true, message: '请输入专业号!' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="培养模式">
            <a-select @change="pymsChange" v-decorator="[
              'pymsm',
              {
                rules: [{ required: true, message: '请选择培养模式!' }]
              }
            ]" :allowClear="true">
              <a-select-option v-for="i in selectMenu.pyms" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="48">
        <a-col :md="12" :sm="24">
          <a-form-item
            label="学科专业码"
          >
            <a-input
              v-decorator="[
                'xkzym',
                {
                  rules: [{ required: true, message: '请输入学科专业码!' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="专业名称"
          >
            <a-input
              v-decorator="[
              'zymc',
              {
                rules: [{ required: true, message: '请输入专业名称!' }],
              }
            ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="48">
        <a-col :md="12" :sm="24">
          <a-form-item
            label="拼音简码"
          >
            <a-input v-decorator="['pyjm']"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="专业英文名"
          >
            <a-input v-decorator="['zyywm']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="48">
        <a-col :md="12" :sm="24">
          <a-form-item
            label="专业简称"
          >
            <a-input v-decorator="['zyjc']"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="隶属单位"
          >
            <a-select @change="yxChange" v-decorator="['lsdwh',
              {
                rules: [{ required: true, message: '请选择隶属单位!' }]
              }]">
              <a-select-option v-for="i in selectMenu.college" :key="i.id" :value="i.dwh">{{ i.dwh }} {{ i.dwmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="48" v-show="pymsm === '01'">
        <a-col :md="12" :sm="24">
          <a-form-item
            label="国际学科类别"
          >
            <a-select @change="subjectChange" v-decorator="['gjxklbm',
              {
                rules: [{ required: true, message: '请选择国际学科类别!' }]
              }]" >
              <a-select-option v-for="(i,index) in selectMenu.subject" :key="index+'c'" :value="i.xkdm">{{ i.xkdm + ' ' + i.xkmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="一级学科"
          >
            <a-select placeholder="请先选择单位和国际学科类别" v-decorator="['yjxkm']" showSearch :filterOption="filterOption">
              <a-select-option v-for="(i,index) in yjSubject" :key="index + 'a'" :value="i.xkdm">{{i.xkdm + ' ' + i.xkmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="48">
        <a-col :md="12" :sm="24" v-show="pymsm === '02'">
          <a-form-item label="领域">
            <a-select allowClear v-decorator="['gjxklbm',
              {
                rules: [{ required: true, message: '专业学位类别（领域）' }]
              }]" showSearch :filterOption="filterOption">
              <a-select-option v-for="i in selectMenu.subjectList" :key="i.id" :value="i.xkdm">{{i.xkdm + ' ' + i.xkmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="学位"
          >
            <a-select v-decorator="['sshbsxw',
              {
                rules: [{ required: true, message: '请选择学位!' }]
              }]" mode="multiple" showSearch :filterOption="filterOption" >
              <a-select-option v-for="(i,index) in selectMenu.xw" :key="index" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="48">
        <a-col :md="12" :sm="24">
          <a-form-item
            label="一级学科硕士授予时间"
          >
            <a-date-picker v-decorator="['yjxksssysj']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="二级学科硕士授予时间"
          >
            <a-date-picker v-decorator="['ejxksssysj']" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="48">
        <a-col :md="12" :sm="24">
          <a-form-item
            label="一级学科博士授予时间"
          >
            <a-date-picker v-decorator="['yjxkbssysj']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="二级学科博士授予时间"
          >
            <a-date-picker v-decorator="['ejxkbssysj']" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="48">
        <a-col :md="12" :sm="24">
          <a-form-item :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 15, offset: 1}">
            <a-checkbox v-decorator="['sssfbz',
              {
                rules: [{ required: true, message: '请选择是否本年度硕士招生!' }],
                initialValue: false,
              }]" :checked="form.getFieldsValue().sssfbz">本年度硕士招生</a-checkbox>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 15, offset: 1}">
            <a-checkbox v-decorator="['bssfbz',
              {
                rules: [{ required: true, message: '请选择是否本年度博士招生!' }],
                initialValue: false,
              }]" :checked="form.getFieldsValue().bssfbz">本年度博士招生</a-checkbox>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="48">
        <a-col :md="24" :sm="48">
          <a-form-item label="备注" :labelCol="{span: 2}" :wrapperCol="{span: 21, offset: 1}">
            <a-input type="textarea" v-decorator="['note']" :autosize="{ minRows: 2, maxRows: 6 }"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
import ARow from "ant-design-vue/es/grid/Row";
import ACol from "ant-design-vue/es/grid/Col";
export default {
  components: {ACol, ARow},
  props: ['visible', 'editId', 'selectMenu'],
  data () {
    return {
      pymsm: '01',
      yjSubject: []
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  methods: {
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    pymsChange(code){
      this.pymsm = code
      this.form.setFieldsValue({yjxkm: ''})
      this.form.setFieldsValue({gjxkdm: ''})
      this.$api.base.subjectAll({xklb: code === '01' ? '01' : '04'}).then(res => {
        this.$set(this.selectMenu, 'subjectList', res.data)
      })
    },
    yxChange (code) {
      // this.form.setFieldsValue({yjxkm: ''})
      this.yjSubject = []
      let gjxklbm = this.form.getFieldValue('gjxklbm')
      if (gjxklbm) {
        this.subjectChange(gjxklbm)
      }
    },
    subjectChange (code) {
      // if (!this.form.getFieldValue('lsdwh')) {
      //   return
      // }
      this.$api.base.subjectAll({
        // lsdwh: this.form.getFieldValue('lsdwh'),
        fjxkdm: code,
        xklb: '02'
      }).then(res => {
        this.yjSubject = res.data
      })
    },
    // firstSubjectChange(code) {
    //   this.$api.base.subjectAll({
    //     lsdwh: this.form.getFieldValue('lsdwh'),
    //     fjxklbm: code,
    //     xklb: '03'
    //   }).then(res => {
    //     this.ejSubject = res.data
    //   })
    // }
  }
}
</script>

<style>
</style>
